<template>
    <div class="app-container my_class" id="waiting_hall" ref="waiting_ref">
        <!-- 头部盒子 -->
        <el-row :gutter="10" type="flex" justify="space-between">
         <el-col :span="6" style="text-align: center">
             <el-image style="width: 180px; height: 120px" :src="logo" fit="fill"/>
         </el-col>
         <el-col :span="6" style="text-align: center">
             <span class="waiting_hall_head__title">候考厅</span>
         </el-col>
         <el-col :span="6">
             <div>
                 <!-- 全屏按键 -->
                 <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" style="float: right;" @click="fullScreen"/>
                 <!-- 时钟 -->
                 <CLOCK color="black"/>
             </div>
         </el-col>
        </el-row>
<!--        </div>-->
        <!-- 左边盒子 -->
        <el-row :gutter="40">
         <el-col :span="7">
             <el-row>
                 <el-card class="box-card waiting_hall_right__examInfo">
                     <el-descriptions :column="1">
                         <template slot="title">
                             <center>
                                 <span class="waiting_hall_right__title">考试信息</span>
                             </center>
                         </template>
                         <el-descriptions-item label-class-name="info_title" content-class-name="info_text" label="考试名称">
                             {{ exam.name }}
                         </el-descriptions-item>
                         <el-descriptions-item label-class-name="info_title" content-class-name="info_text" label="考试时间">
                             <span v-if="exam.exStartDate === exam.exEndDate">
                                {{ parseTime(exam.exStartDate, '{y}年{m}月{d}日') }}
                             </span>
                             <span v-else>
                                {{ parseTime(exam.exStartDate, '{y}年{m}月{d}日') }}-{{ parseTime(exam.exEndDate, '{y}年{m}月{d}日') }}
                             </span>
                         </el-descriptions-item>
                         <el-descriptions-item label-class-name="info_title" content-class-name="info_text" label="考站数量">
                             <p v-for="(c,name) in place_count" style="margin: 0;padding: 0">
                                 {{ name }}{{ c }} 个
                             </p>
                         </el-descriptions-item>
                     </el-descriptions>
                 </el-card>
             </el-row>
             <el-row style="text-align: center;margin-top: 2%">
                <span class="waiting_hall_right__title">候考人员</span>
             </el-row>
             <el-row>
                 <template v-for="code in waiting_data.unscheduleds">
                     <el-tag v-show="isNotEmpty(waiting_data.peopleMap[code]) && waiting_data.peopleMap[code].view" effect="plain" type="warning">{{ code }}</el-tag>
                 </template>
             </el-row>
         </el-col>
         <el-col :span="17">
             <el-row style="text-align: center">
                 <span class="waiting_hall_left__title">候考队列</span>
             </el-row>
             <el-row :gutter="10">
                 <el-row v-for="(data,id) in waiting_data.placeWaitingMap">
                     <div class="little_line_box">
                         <el-col :span="4" class="little_line_head">
                             {{ data.placeName }}-{{data.index+1}}
                         </el-col>
                         <el-col :span="20" class="little_line_body">
                             <template v-if="isEmptyArr(data.stus)">
                                 <el-tag effect="dark" type="info">空</el-tag>
                             </template>
                             <el-row v-else type="flex" justify="space-between">
                              <el-col :span="24/data.stus.length" v-for="(code,index) in data.stus" :key="index" style="padding-top: 44px">
                                  <el-tag v-show="code == '#0'" style="visibility: hidden"/>
                                  <el-tag v-show="isNotEmpty(waiting_data.peopleMap[code]) && waiting_data.peopleMap[code].view" :type="showFirst(data.stus,code) ? 'danger':'success'">
                                      {{ code }}
                                      <template v-show="nameShow">
                                          <br/>
                                          <span style="color: white;font-size: 20px;margin-left: -20px">{{waiting_data.peopleMap[code].userName}}</span>
                                      </template>
                                  </el-tag>
                              </el-col>
                             </el-row>
                         </el-col>
                     </div>
                 </el-row>
             </el-row>
         </el-col>
        </el-row>
        <!-- 文字标识 -->
        <div class="ex_place_middle_company">
            <span>上海嘉奕医学科技有限公司 技术支持</span>
        </div>
    </div>
</template>

<script>
import screenfull from 'screenfull'
import CLOCK from "@/views/tool/date/clock.vue";//时钟
import {isEmptyStr, isNotEmpty} from "@/utils/zzDouUtils/objUtil";
import {isEmptyArr} from "@/utils/zzDouUtils/arrayUtil";
import {parseTime} from "../../../../utils/ruoyi";
//倒计时

export default {
    name: "place_show_in",
    components: {CLOCK},
    props: {},
    data() {
        return {
            // logo: 'https://www.jy-medtechs.com/minio-api/rw-jy/logo-ry.png',
            logo: 'https://obs.jy-medtechs.com/jiayi-medical-vr/71f28f33-d934-40c3-8ac9-9939bb7a0b88.png',
            exam: {},
            place_count:{},
            nameShow: false,
            waiting_data:{
                examId: null,
                timeId: null,
                minPeopleNum: null,
                unscheduleds: [],
                placeWaitingMap: {}
            },
            isFullscreen: false
        };
    },
    watch: {},
    created() {
    },
    mounted() {
        this.initFullScreen()
    },
    methods: {
        isNotEmpty,
        parseTime,
        isEmptyArr,
        /** 全屏 */
        fullScreen() {
            if (!screenfull.isEnabled) {
                this.$message({ message: '你的浏览器不支持全屏', type: 'warning' })
                return false
            }
            screenfull.toggle(this.$refs.waiting_ref);
        },
        changeFullScreen() {
            this.isFullscreen = screenfull.isFullscreen
        },
        initFullScreen() {
            if (screenfull.isEnabled) {
                screenfull.on('change', this.changeFullScreen)
            }
        },
        destroyFullScreen() {
            if (screenfull.isEnabled) {
                screenfull.off('change', this.changeFullScreen)
            }
        },
        skillFormat(value) {
            let str = '';
            if (isEmptyStr(value)){
                return str;
            }
            for (let i = 0; i < value.length; i++) {
                str += value[i];
                if (i != value.length - 1) {
                    str += '、';
                }
            }
            return str;
        },
        showFirst(list,code){
            if (list[0] == '#0'){
                return false;
            }
            let c;
            for (let i = 0; i < list.length; i++) {
                const a = this.waiting_data.peopleMap[list[i]];
                if (a.view){
                    c = a.code;
                    break;
                }
            }
            return c == code;
        }
    },
    beforeDestroy() {
        this.destroyFullScreen()
    }
}
</script>
<style scoped>
.my_class {
    height: 900px;
    border-radius: 20px;
    background-image: url("../../../../assets/images/waiting_hall.jpg");
     /*background-color: #4dffa6;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* 禁止选中 */
    -webkit-user-select: none; /*webkit浏览器*/
    -moz-user-select: none; /*火狐*/
    -ms-user-select: none; /*IE10*/
    user-select: none;
}

.waiting_hall_head__title {
    color: black;
    font-weight: bold;
    font-size: 80px;
    font-family: 楷体;
    float: left;
}

/*-----------------------------*/

.waiting_hall_right__title {
    text-align: center;
    font-family: 楷体;
    font-weight: bold;
    font-size: 35px;
    color: black;
}

.waiting_hall_right__examInfo {
    border-radius: 17px;
}


:deep .waiting_hall_right__examInfo .info_title {
    color: black;
    font-size: 24px;
    font-weight: bold;
    font-family: 楷体;
}
:deep .waiting_hall_right__examInfo .info_text {
    color: black;
    font-size: 22px;
    font-weight: bold;
    font-family: 仿宋;
    margin-top: 4px;
}

:deep .el-descriptions__title{
    width: 100%;
}

.my_class .el-tag {
    width: 100px;
    height: 35px !important;
    text-align: center;
    font-size: 30px !important;
    font-weight: bold;
    line-height: 35px !important;
    margin-top: 10px;
    margin-left: 20px;
    float: left;
}

/*-----------------------------*/
.waiting_hall_left__title {
    font-family: 楷体;
    font-weight: bold;
    font-size: 35px;
    color: black;
}

.little_line_box {
    height: 130px;
    border-bottom: solid 3px #409eff;
    margin-bottom: 10px;
}

.little_line_head {
    height: 100%;
    font-size: 40px;
    font-weight: bold;
    color: black;
    line-height: 130px;
    text-align: center;
}

.little_line_body {
    text-align: center;
    height: 130px;
    line-height: 130px;
    text-align: center;
    overflow-x: hidden;
}

.ex_place_middle_company {
    height: 20px;
    line-height: 20px;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: green;
    font-weight: bold;
    font-family: Arial;
    font-size: 16px;
    letter-spacing: 1px;
    position: absolute;
}
</style>
